import React from 'react';
import { Card, Row, Col, Statistic, Table, Typography, List, Tag } from 'antd';
import {
  UserOutlined,
  ShoppingCartOutlined,
  DollarOutlined,
  FileOutlined,
} from '@ant-design/icons';
import './style.less';

const { Title } = Typography;

// 模拟数据
const recentOrders = [
  { id: 1, customer: '张三', amount: 1200, status: '已完成', date: '2023-06-01' },
  { id: 2, customer: '李四', amount: 890, status: '处理中', date: '2023-06-02' },
  { id: 3, customer: '王五', amount: 2300, status: '已完成', date: '2023-06-03' },
  { id: 4, customer: '赵六', amount: 1500, status: '已取消', date: '2023-06-04' },
  { id: 5, customer: '钱七', amount: 3200, status: '处理中', date: '2023-06-05' },
];

const notifications = [
  { id: 1, title: '系统更新', description: '系统将于今晚22:00进行更新维护', time: '10分钟前' },
  { id: 2, title: '新订单', description: '收到来自客户李四的新订单', time: '30分钟前' },
  { id: 3, title: '任务提醒', description: '您有一个任务即将到期', time: '1小时前' },
  { id: 4, title: '安全警告', description: '检测到异常登录尝试', time: '2小时前' },
];

const Dashboard: React.FC = () => {
  const columns = [
    {
      title: '订单ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '客户',
      dataIndex: 'customer',
      key: 'customer',
    },
    {
      title: '金额',
      dataIndex: 'amount',
      key: 'amount',
      render: (amount: number) => `¥${amount.toFixed(2)}`,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        let color = '';
        switch (status) {
          case '已完成':
            color = 'green';
            break;
          case '处理中':
            color = 'blue';
            break;
          case '已取消':
            color = 'red';
            break;
          default:
            color = 'default';
        }
        return <Tag color={color}>{status}</Tag>;
      },
    },
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
    },
  ];

  return (
    <div className="dashboard-container">
      <Title level={4} className="page-title">XX平台装备流程管理系统</Title>
      
      {/* 统计卡片 */}
      <Row gutter={16} className="stats-row">
        <Col xs={24} sm={12} md={6}>
          <Card className="stats-card">
            <Statistic
              title="用户总数"
              value={1254}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card className="stats-card">
            <Statistic
              title="订单总数"
              value={152}
              prefix={<ShoppingCartOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card className="stats-card">
            <Statistic
              title="收入总额"
              value={28600}
              prefix={<DollarOutlined />}
              valueStyle={{ color: '#cf1322' }}
              suffix="¥"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card className="stats-card">
            <Statistic
              title="文件总数"
              value={324}
              prefix={<FileOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 最近订单和通知 */}
      <Row gutter={16} className="data-row">
        <Col xs={24} lg={16}>
          <Card title="最近订单" className="orders-card">
            <Table
              columns={columns}
              dataSource={recentOrders}
              pagination={false}
              rowKey="id"
            />
          </Card>
        </Col>
        <Col xs={24} lg={8}>
          <Card title="通知" className="notifications-card">
            <List
              itemLayout="horizontal"
              dataSource={notifications}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    title={item.title}
                    description={item.description}
                  />
                  <div>{item.time}</div>
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;